<template>
  <div class="chart-box">
    <div id="chart-5" style="width: 100%; height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); //引入主题
export default {
  data() {
    return {
      start: null,
      end: null,
      companyName: [],
      bachelorNum: [],
      masterNum: [],
      chart: null,
    };
  },
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.getOrg(this.start, this.end);
    });
  },
  mounted() {
    // this.drawChart();
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-5"));
    },
  },
  methods: {
    //初始化数据
    initData(start, end) {
      this.axios({
        url: "grad/org_name",
        method: "get",
        params: {
          start: start,
          end: end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          let bachelor = res.data.data.bachelor;
          let master = res.data.data.master;
          // 本科生 统计
          let companys = [];
          let nums = [];
          for (let i in bachelor) {
            companys.push(bachelor[i].term);
            nums.push(bachelor[i].num);
          }
          // 共有的公司
          let com_company = [];
          let com_bach_num = [];
          let com_mas_num = [];
          // console.log(master)
          for (let i in master) {
            for (let j in companys) {
              if (companys[j] == master[i].term) {
                com_company.push(companys[j]);
                com_bach_num.push(nums[j]);
                com_mas_num.push(master[i].num);
              }
            }
          }
          this.company = com_company;
          this.bach_num = com_bach_num;
          this.mas_num = com_mas_num;
          // this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          this.drawChart();
          // })
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getOrg(start, end) {
      this.axios({
        url: "grad/org_name_total",
        methods: "get",
        params: {
          start: start,
          end: end,
        },
      })
        .then((res) => {
          let tableData = res.data.data;
          this.companyName = [];
          this.bachelorNum = [];
          this.masterNum = [];
          for (let i = 0; i < 4; i++) {
            this.companyName.push(tableData[i].term);
            this.bachelorNum.push(tableData[i].bachelorNum);
            this.masterNum.push(tableData[i].masterNum);
          }
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      echarts.init(document.getElementById("chart-5")).dispose();
      this.myChart = echarts.init(document.getElementById("chart-5"));
      let option = {
        title: {
          text: this.start + "届签协议和合同就业毕业生的主要去向单位",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["本科生", "研究生"],
          bottom: "bottom",
        },
        grid: {
          height: 230,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.companyName,
            axisLabel: {
              interval: 0,
              rotate: 10,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "本科生",
            type: "bar",
            barWidth: 30,
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: this.bachelorNum,
          },
          {
            name: "研究生",
            type: "bar",
            barWidth: 30,
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: this.masterNum,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
